<script setup>
import { reactive, ref } from "vue";
import TRTC from "trtc-sdk-v5";
import trtc from "./trtc";
const sdkAppId = reactive(1600031832);
const userSig = reactive(
  "eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwuZQweKU7MSCgswUJStDMwMDA2NDC2MjiExqRUFmUSpQ3NTU1AgoBREtycwFiZkbmlhYGBgZmkNNyUwHmhlp4OTj6eVtmpURGKNvEJYRpu0VVVkZletjoO2el28Y5uOWmGYeahJUWlAZaqtUCwAeYC9D"
);
async function enterRoom() {
  try {
    let options = {
      strRoomId: "@TGS#aUCYEVGOT",
      sdkAppId,
      userId: "7",
      userSig,
    };
    console.log(options);
    let enterRoom = await trtc.enterRoom(options);
    console.log("进房成功", enterRoom);
    enablePreview();
  } catch (error) {
    console.error("进房失败 " + error);
  }
}
/**
 * 主播开启预览  不推流
 */
async function enablePreview() {
  console.log(212222, "212222");
  const switchRole = await trtc.switchRole(TRTC.TYPE.ROLE_ANCHOR);
  console.log(switchRole, "switchRole");
  const config = {
    view: document.getElementById("player"), // 在 DOM 中的 elementId 为 localVideo 的标签上预览视频。
    publish: false, // 不发布摄像头
    option: {
      mirror: false,
    },
  };
  const startLocalVideo = await trtc.startLocalVideo(config);
  console.log(startLocalVideo, "startLocalVideo");
}
/***
 * 开启直播
 */
async function startLiveStreaming() {
  const startLocalAudio = await trtc.startLocalAudio();
  await trtc.updateLocalVideo({ publish: true });
}
</script>

<template>
  <button @click="enterRoom">JINRUFANGJIAN</button>
  <button @click="startLiveStreaming">KAIQIZHIBO</button>
  <button @click="enterRoom">PK</button>
  <div id="player" class="player"></div>
</template>

<style scoped>
button {
  margin-left: 20px;
}
.player {
  width: 500px;
  height: 500px;
  border-radius: 12px;
  border: 1px solid salmon;
  margin-top: 10px;
}
</style>
